<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside
        class="aside"
        :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }"
      >
        <el-menu
          router
          default-active="index"
          background-color="#eee"
          text-color="#ble"
          :style="{ height: '100vh' }"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
        >
          <el-menu-item>
            <img width="30px" src="" alt="" />
            <template slot="title">
              <span style="font-size: 1.2em; color: #e60012; font-weight: bold"
                >&nbsp;&nbsp;名创优品后台管理</span
              >
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title"> 主页 </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">商品分类</span>
            </template>
            <el-menu-item index="/home/furnishings">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">创意家居</span>
            </el-menu-item>
            <el-menu-item index="/home/cosmetology">
              <i class="el-icon-s-claim"></i>
              <span slot="title">健康美容</span>
            </el-menu-item>
            <el-menu-item index="/home/dailynecessities">
              <i class="el-icon-suitcase"></i>
              <span slot="title">生活百货</span>
            </el-menu-item>
            <el-menu-item index="/home/jewelry">
              <i class="el-icon-goods"></i>
              <span slot="title">时尚饰品</span>
            </el-menu-item>
            <el-menu-item index="/home/electron">
              <i class="el-icon-camera-solid"></i>
              <span slot="title">数码配件</span>
            </el-menu-item>
            <el-menu-item index="/home/food">
              <i class="el-icon-dish"></i>
              <span slot="title">食品</span>
            </el-menu-item>
            <el-menu-item index="/home/shoppingadd">
              <i class="el-icon-circle-plus-outline"></i>
              <span slot="title">增加商品</span>
            </el-menu-item>
          </el-submenu>




          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">店铺管理</span>
            </template>
            <el-menu-item index="/home/shop-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">店铺列表</span>
            </el-menu-item>
            <el-menu-item index="/home/shop-add">
              <i class="el-icon-plus"></i>
              <span slot="title">店铺新增</span>
            </el-menu-item>
          </el-submenu>



<!--           
          <el-menu-item index="/home/admin">
            <i class="el-icon-user-solid"></i>
            <template slot="title"> 用户管理 </template>
          </el-menu-item> -->



        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i
            v-show="!isCollapse"
            class="el-icon-s-fold"
            @click="isCollapse = true"
          ></i>
          <i
            v-show="isCollapse"
            class="el-icon-s-unfold"
            @click="isCollapse = false"
          ></i>
          &nbsp;&nbsp; &nbsp;&nbsp;
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" style="flex: 1">
            <el-breadcrumb-item
              v-for="item in $route.meta.thumbs"
              :key="item.name ? item.name : item"
              :to="item.to ? item.to : ''"
            >
              {{ item.name ? item.name : item }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>


export default {
  data() {
    return {
      isCollapse: false,
    };
  },
 
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
